<template>
  <el-dialog
    v-model="visible"
    title="信息统计表"
    :closed="handleClose"
    width="80%"
    top="7vh"
    class="info-table"
  >
    <el-table
      :data="data"
      empty-text="暂无数据"
      style="width: 100%; height: 70vh; background-color: transparent"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
      row-class-name="info-table-row"
      cell-class-name="info-cell"
      header-row-class-name="info-header"
    >
      <el-table-column prop="code" label="网格编号" width="100" />
      <el-table-column
        prop="location"
        label="网格位置"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column
        prop="altitudeRange"
        label="高度范围(m)"
        show-overflow-tooltip
        width="120"
        align="right"
      />
      <el-table-column
        prop="capacity"
        label="容量(架次/15min)"
        show-overflow-tooltip
        width="150"
        align="right"
      />
      <el-table-column
        prop="flow"
        label="流量(架次/15min)"
        show-overflow-tooltip
        width="150"
        align="right"
      />
      <el-table-column
        prop="capacityFlowRatio"
        label="容流比(%)"
        show-overflow-tooltip
        width="120"
        align="right"
      />
      <el-table-column
        prop="env"
        label="互联环境配备"
        show-overflow-tooltip
        width="150"
      />
      <el-table-column
        prop="risk"
        label="风险评估值"
        show-overflow-tooltip
        width="120"
        align="right"
      />
      <el-table-column
        prop="noise"
        label="噪声限制(Db)"
        show-overflow-tooltip
        width="150"
        align="right"
      />
      <el-table-column
        prop="speed"
        label="速度限制(m/s) "
        show-overflow-tooltip
        width="150"
        align="right"
      />
      <el-table-column
        prop="crowLevel"
        label="拥挤等级"
        show-overflow-tooltip
        width="120"
        align="right"
      >
        <template #default="{ row }"> {{ getcrowLevel(row) }}</template>
      </el-table-column>
      <el-table-column
        prop="people"
        label="人口密度(人/平方公里)"
        show-overflow-tooltip
        width="170"
        align="right"
      />
      <el-table-column
        prop="cost"
        label="费用(元/平方公里)"
        show-overflow-tooltip
        width="160"
        align="right"
      />
      <el-table-column
        prop="flyRules"
        label="飞行规则"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        prop="aircraftType"
        label="航空器类型"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        prop="activity"
        label="飞行活动类型"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        prop="requirement"
        label="空域准入条件"
        show-overflow-tooltip
        width="120"
      />
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref, toRefs, watch } from "vue";
import { ElMessage } from "element-plus";
import api from "@/api/statistics";

const props = defineProps({
  visible: Boolean,
});

const emits = defineEmits(["change"]);

const { visible } = toRefs(props);

const data = ref([]);

watch(visible, (newValue, oldValue) => {
  if (newValue) {
    getList();
  } else {
    data.value = [];
  }
});

const handleClose = () => {
  data.value = [];
  emits("change", "infoTable");
};

const getList = async () => {
  const result = await api.getList();
  if (result.code === 200) {
    data.value = result.data || [];
  } else {
    ElMessage.error(result.msg);
  }
};

const getcrowLevel = (row) => {
  const { crowLevel } = row;
  if (crowLevel == 2) {
    return "中";
  } else if (crowLevel > 2) {
    return "高";
  } else if (crowLevel < 2) {
    return "低";
  }
};
</script>

<style>
.info-table {
  /* background-color: rgba(21, 104, 138, 0.6) !important;
   */
  background: linear-gradient(
    180deg,
    rgba(8, 40, 75, 0.45) 0%,
    rgba(10, 41, 73, 0.45) 15.35%,
    rgba(11, 70, 146, 0.45) 35.16%,
    rgba(11, 78, 167, 0.45) 62.46%,
    rgba(11, 30, 60, 0.45) 83.98%,
    rgba(13, 33, 58, 0.45) 100%
  );
  border: 4px solid;
  border-color: rgba(84, 84, 84, 0.45);
  border-radius: 15px;
}
.info-cell {
  background: pink;
}
:deep(.el-table__row) {
  background: rgba(21, 104, 138, 0.6) !important;
}
</style>
